import React from 'react';
// 验证码组件
// 验证码是后端调用一个第三方的插件, 然后形成的一个随机的img图片路径 ,然后将该
// 图片路径返回给前端, 前端展示处理就是验证码效果

import axios from 'axios';
import { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
import Pts from 'prop-types';


const Captcha = forwardRef((props, ref) => {
    const [imgurl, setImgUrl] = useState('');

    useEffect(() => {
        getCaptcha()
    }, [])
    const getCaptcha = () => {
        axios.get('https://reactapi.iynn.cn/captcha/api/math').then(res => {
            // console.log(res);
            if (res.status == 200) {
                setImgUrl(res.data.img)
                // 将后端返回的验证码对应的惟一的key 保存在父组件中,这样不会导致第二个验证码组件复用的时候,
                //第二次返回的key 覆盖第一次返回的key
                // 通过子传父的方式, 将key 传递给父组件   
                props.saveKey(res.data.key)
            }
        })
    }

    // 定义一个点击刷新事件
    const loadashFn = () => {
        getCaptcha()
    }

    // 使用 useImperativeHandle 将 当前组件自身的方法或数据暴露给父组件,这样父组件就可以通过ref 来获取子组件上的
    // 数据进和方法啦(就是子传父)
    useImperativeHandle(ref, () => { return { loadashFn } })
    return (
        <div>
            <img src={imgurl} onClick={loadashFn} width={props.w} height={props.h} />
        </div>
    );
})


// 属性约束
Captcha.propTypes = {
    saveKey: Pts.func.isRequired,
    w: Pts.number,
    h: Pts.number
}

// 属性的默认值

Captcha.defaultProps = {
    w: 140,
    h: 40
}

export default Captcha;
